<template>
  <nav>
    <div class="top-logo">~@####$~~</div>
    <ul>
      <li
        v-for="(item, i) in navItems"
        :key="i"
        @click="this.$router.push(item.path)"
        :class="{ active: item.name === $route.name }"
      >
        <a href="#">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const navItems = reactive([
      {
        name: "题库",
        path: "/questionbank",
      },
      {
        name: "考试记录",
        path: "/testrecord",
      },
    ]);
    return {
      navItems,
    };
  },
};
</script>

<style lang="scss" scoped>
nav {
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--aside-fg);
  background-color: var(--aside-bg);
  .top-logo {
    cursor: pointer;
    padding: 12px;
    width: 100%;
    height: 46px;
    box-shadow: 0 0 2px rgb(226, 224, 224);
  }
  ul {
    padding-top: 0.5em;
    font-size: 1rem;
    text-align: left;
    li {
      cursor: pointer;
      padding: 0.6em 2em;
      transition: 0.5s;
    }
    li:hover {
      color: var(--aside-active-fg);
    }
    .active {
      color: var(--aside-active-fg);
      background: var(--aside-active-bg);
    }
  }
}
</style>